.cart {
		&-handle {
			position: fixed;
			left: 32rpx;
			right: 26rpx;
			height: 92rpx;
			border-radius: 46rpx;
			bottom: calc(constant(safe-area-inset-bottom) / 2 + 17rpx);
			bottom: calc(env(safe-area-inset-bottom) / 2 + 17rpx);
			z-index: 9999;
			background-color: #fff; // 可选：防止透明背景影响
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); // 可选：添加阴影提升视觉效果
		}

		&-inner {
			width: 100%;
			display: flex;

			.icon-cart {
				width: 59.72rpx;
				height: 59.72rpx;
				vertical-align: top;
				margin-left: 36rpx;
			}

			&__hd {
				flex-shrink: 0;
				padding: 17.36rpx 0 15.28rpx 0;
				background: #000000;
				border-radius: 46rpx 0 0 46rpx;
				padding-right: 29rpx;
				position: relative;

			}

			&__number {
				position: absolute;
				top: 16rpx;
				right: 18rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				font-size: 23rpx;
				min-width: 33rpx;
				text-align: center;
				height: 33rpx;
				background: #FF230C;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				color: #fff;
			}

			&__totalPrice {
				flex: 1;
				display: flex;
				align-items: center;
				background: #000000;
				font-size: 30rpx;
				font-weight: 600;
				color: #FFFFFF;

				&__prefix {
					align-self: self-end;
					margin-bottom: 20rpx;
				}

				&__value {
					font-family: Source Han Sans CN;
					font-size: 30rpx;
				}
			}

			&__button {
				flex-shrink: 0;
				border-radius: 0 46rpx 46rpx 0;
				font-family: Source Han Sans CN;
				font-weight: 600;
				font-size: 36rpx;
				color: #000000;
				width: 172rpx;
				line-height: 92rpx;
				background: linear-gradient(90deg, #FFDD32, #FDC034);
				;

				&::after {
					display: none;
				}
			}
		}

		&-info {
			max-height: 325px;
			overflow-y: auto;
			padding: 26rpx 26rpx 0 32rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) / 2 + 120rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 120rpx);

			.product {
				display: flex;
				padding: 16rpx 0;

				&-image {
					width: 150.9rpx;
					height: 141.94rpx;
					vertical-align: top;
					flex-shrink: 0;
					border-radius: 4rpx;
					margin-right: 18rpx;
				}

				&-name {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					margin-bottom: 20rpx;
				}

				&-desc {
					overflow: hidden;
					margin-top: 5rpx;
					display: flex;
					align-content: center;
					align-items: center;
					margin-top: 10rpx;

					&-desc-text {
						background-color: #FAEFF7;
						padding: 2rpx 10rpx;
						box-sizing: border-box;
						color: #e11d48;
						border-radius: 10rpx;
						margin-right: 15rpx;
					}
				}

				&-price {
					font-family: Source Han Sans CN;
					font-weight: 600;
					color: #F55A06;
					font-size: 21rpx;

					&__value {
						font-size: 28rpx;
					}
				}

				&-handle {
					display: flex;
					align-items: center;

					&__number {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 25rpx;
						color: #3E3E3E;
						line-height: 25rpx;
						text-align: center;
						min-width: 62rpx;
					}
				}

				&-icon-plus,
				&-icon-minus {
					width: 29.86rpx;
					height: 29.86rpx;
					vertical-align: top;
				}
			}
		}
	}

	.cate-box {
		display: flex;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		/* #endif */

		.left {
			width: 200rpx;
			background: #f5f4f8;
			font-size: 28rpx;

			.left-text {
				text-align: center;
				padding: 20rpx 10rpx;
				border-bottom: 1px solid #fff;
				position: relative;
			}

			.active {
				padding: 24rpx 10rpx;
				background: #fff;
				font-size: 30rpx;
				font-weight: 600;
			}

			.active.left-text::before {
				content: '';
				height: 50rpx;
				width: 10rpx;
				background: #e11d48;
				position: absolute;
				left: 0;
				border-radius: 0 10rpx 10rpx 0;
			}
		}

		.right {
			flex: 1;
			padding: 20rpx 15rpx;
			padding-bottom: 212rpx;

			.right-box {
				font-size: 28rpx;
				padding-right: 20rpx;

				.cate-title {
					display: flex;
					justify-content: center;
					font-size: 30rpx;
					font-weight: 600;
					text-align: center;
					position: relative;
					margin-bottom: 20rpx;

					// view {
					// 	padding: 0 20rpx;
					// 	border-left: 5px solid #e11d48;
					// 	border-right: 5px solid #e11d48;
					// 	border-radius: 10rpx;
					// 	font-weight: bold;
					// }
				}

				// .cate-title::after{content: '';width: 80rpx;height: 5rpx;
				// 	background: #e11d48;position: absolute;bottom:-10rpx;

				// }


				.goods-box {
					display: flex;
					padding: 20rpx 0;
					align-items: center;

					.img-box {
						width: 200rpx;
						height: 200rpx;
						display: flex;
						align-items: center;

						.goods-img {
							width: 80%;
							height: 80%;
							border-radius: 10rpx;
						}
					}

					.goods-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-bottom: 15rpx;
						border-bottom: 1px solid #f5f4f8;

						.goods-title {
							margin-top: -10rpx;
							font-weight: 500;
							line-height: 40rpx;
							font-weight: bold
						}

						.goods-desc {
							overflow: hidden;
							margin-top: 5rpx;
							display: flex;
							align-content: center;
							align-items: center;
							margin-top: 10rpx;
							font-size: 22rpx;

							.desc-text {
								background-color: #FAEFF7;
								padding: 2rpx 10rpx;
								box-sizing: border-box;
								color: #e11d48;
								border-radius: 10rpx;
								margin-right: 15rpx;
							}
						}

						.goods-price-cart {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-top: 10rpx;

							.goods-price {
								color: #e11d48;
								font-weight: bold;
								font-size: 26rpx;
							}

							.goods-cart {
								height: 50rpx;
								width: 50rpx;
								background: #e11d48;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 50rpx;
								;
							}
						}
					}

					.product {
						display: flex;
						padding: 16rpx 0;

						&-image {
							width: 150.9rpx;
							height: 141.94rpx;
							vertical-align: top;
							flex-shrink: 0;
							border-radius: 4rpx;
							margin-right: 18rpx;
						}

						&-name {
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							margin-bottom: 20rpx;
						}

						&-desc {
							font-family: Source Han Sans CN;
							font-weight: 300;
							font-size: 21rpx;
							color: #535353;
						}

						&-price {
							font-family: Source Han Sans CN;
							font-weight: 600;
							color: #F55A06;
							font-size: 21rpx;

							&__value {
								font-size: 28rpx;
							}
						}

						&-handle {
							display: flex;
							align-items: center;

							&__number {
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 25rpx;
								color: #3E3E3E;
								line-height: 25rpx;
								text-align: center;
								min-width: 62rpx;
							}
						}

						&-icon-plus,
						&-icon-minus {
							width: 29.86rpx;
							height: 29.86rpx;
							vertical-align: top;
						}
					}
				}
			}
		}

	}

	.popup {
		.product {
			display: flex;
			padding: 16rpx 0;

			&-image {
				width: 150.9rpx;
				height: 141.94rpx;
				vertical-align: top;
				flex-shrink: 0;
				border-radius: 4rpx;
				margin-right: 18rpx;
			}

			&-name {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 20rpx;
			}

			&-desc {
				font-family: Source Han Sans CN;
				font-weight: 300;
				font-size: 21rpx;
				color: #535353;
			}

			&-price {
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #F55A06;
				font-size: 21rpx;

				&__value {
					font-size: 28rpx;
				}
			}

			&-handle {
				display: flex;
				align-items: center;

				&__number {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 25rpx;
					color: #3E3E3E;
					line-height: 25rpx;
					text-align: center;
					min-width: 62rpx;
				}
			}

			&-icon-plus,
			&-icon-minus {
				width: 29.86rpx;
				height: 29.86rpx;
				vertical-align: top;
			}
		}
	}
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
	
		.empty-image {
			width: 300rpx;
			height: 300rpx;
			opacity: 0.6;
		}
	
		.empty-text {
			font-size: 30rpx;
			color: #999;
			margin-top: 30rpx;
		}
	}